import { Icon, IconProps } from '@chakra-ui/react';

export function ToLeftIcon(props: IconProps) {
  return (
    <Icon
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="12px"
      height="12px"
      viewBox="0 0 12 12"
      fill="none"
    >
      <path
        d="M5.414 5.99999L7.889 8.47499L7.182 9.18199L4 5.99999L7.182 2.81799L7.889 3.52499L5.414 5.99999Z"
        fill="#111824"
      />
    </Icon>
  );
}

export function RightFirstIcon(props: IconProps) {
  return (
    <Icon
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="12px"
      height="12px"
      viewBox="0 0 12 12"
      fill="none"
    >
      <path
        d="M2.79492 3.705L5.08992 6L2.79492 8.295L3.49992 9L6.49992 6L3.49992 3L2.79492 3.705ZM7.99992 3H8.99992V9H7.99992V3Z"
        fill="#111824"
      />
    </Icon>
  );
}

export const ChainIcon = (props: IconProps) => (
  <Icon viewBox="0 0 18 18" width="18" height="18" fill="none" {...props}>
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M15.065 4.06161C16.3317 5.82297 16.1731 8.29256 14.5891 9.87655L13.6605 10.8051C13.3574 11.1082 12.866 11.1082 12.563 10.8051L7.28603 5.52819C6.98295 5.22511 6.98295 4.73372 7.28603 4.43064L8.2146 3.50206C9.78978 1.92688 12.2407 1.76126 14.0001 3.00518L15.0432 1.96204C15.3361 1.66915 15.811 1.66915 16.1039 1.96204C16.3968 2.25493 16.3968 2.72981 16.1039 3.0227L15.065 4.06161ZM1.89154 15.1228C1.59865 15.4157 1.59865 15.8906 1.89155 16.1835C2.18444 16.4764 2.65931 16.4764 2.9522 16.1835L3.98563 15.1501C5.74633 16.4091 8.20964 16.2481 9.79066 14.6671L10.7192 13.7385C11.0223 13.4354 11.0223 12.944 10.7192 12.641L10.0647 11.9865L10.6237 11.4275C10.9166 11.1346 10.9166 10.6597 10.6237 10.3668C10.3308 10.074 9.85594 10.074 9.56304 10.3668L9.00409 10.9258L7.17634 9.09806L7.73131 8.54309C8.02421 8.2502 8.02421 7.77532 7.73131 7.48243C7.43842 7.18954 6.96355 7.18954 6.67065 7.48243L6.11568 8.0374L5.4423 7.36402C5.13922 7.06094 4.64783 7.06094 4.34475 7.36402L3.41617 8.2926C1.83803 9.87075 1.67475 12.328 2.92634 14.088L1.89154 15.1228ZM4.89352 8.93657L4.47683 9.35326C3.30235 10.5277 3.30235 12.4319 4.47683 13.6064C5.65131 14.7809 7.55552 14.7809 8.73 13.6064L9.14669 13.1897L4.89352 8.93657ZM13.5284 8.81589L13.1117 9.23258L8.85857 4.97941L9.27526 4.56272C10.4497 3.38824 12.3539 3.38824 13.5284 4.56272C14.7029 5.7372 14.7029 7.64141 13.5284 8.81589Z"
      fill="currentColor"
    />
  </Icon>
);

export const ListIcon = (props: IconProps) => (
  <Icon viewBox="0 0 18 18" width="18" height="18" {...props}>
    <path
      d="M2.01868 6.3782C2.49917 6.3782 2.88868 5.98869 2.88868 5.5082C2.88868 5.02771 2.49917 4.6382 2.01868 4.6382C1.53819 4.6382 1.14868 5.02771 1.14868 5.5082C1.14868 5.98869 1.53819 6.3782 2.01868 6.3782Z"
      fill="currentColor"
    />
    <path
      d="M5.3911 4.7582C4.97688 4.7582 4.6411 5.09399 4.6411 5.5082C4.6411 5.92241 4.97688 6.2582 5.3911 6.2582H16.1012C16.5154 6.2582 16.8512 5.92241 16.8512 5.5082C16.8512 5.09399 16.5154 4.7582 16.1012 4.7582H5.3911Z"
      fill="currentColor"
    />
    <path
      d="M4.6411 9C4.6411 8.58579 4.97688 8.25 5.3911 8.25H16.1012C16.5154 8.25 16.8512 8.58579 16.8512 9C16.8512 9.41421 16.5154 9.75 16.1012 9.75H5.3911C4.97688 9.75 4.6411 9.41421 4.6411 9Z"
      fill="currentColor"
    />
    <path
      d="M2.01868 9.87C2.49917 9.87 2.88868 9.48048 2.88868 9C2.88868 8.51951 2.49917 8.13 2.01868 8.13C1.53819 8.13 1.14868 8.51951 1.14868 9C1.14868 9.48048 1.53819 9.87 2.01868 9.87Z"
      fill="currentColor"
    />
    <path
      d="M4.6411 12.492C4.6411 12.0778 4.97688 11.742 5.3911 11.742H16.1012C16.5154 11.742 16.8512 12.0778 16.8512 12.492C16.8512 12.9062 16.5154 13.242 16.1012 13.242H5.3911C4.97688 13.242 4.6411 12.9062 4.6411 12.492Z"
      fill="currentColor"
    />
    <path
      d="M2.01868 13.362C2.49917 13.362 2.88868 12.9725 2.88868 12.492C2.88868 12.0115 2.49917 11.622 2.01868 11.622C1.53819 11.622 1.14868 12.0115 1.14868 12.492C1.14868 12.9725 1.53819 13.362 2.01868 13.362Z"
      fill="currentColor"
    />
  </Icon>
);
